<template>
  <div class="route-planning-container">
    <!-- 地图容器 -->
    <div ref="routePlanningMapView" class="route-planning-map-view"></div>

    <!-- 操作说明悬浮按钮 -->
    <div class="instruction-button" @click="showInstructionPanel = true">
      <el-icon>
        <InfoFilled />
      </el-icon>
      <span>使用说明</span>
    </div>

    <!-- 操作说明面板 -->
    <el-drawer
      v-model="showInstructionPanel"
      direction="rtl"
      size="360px"
      :with-header="false"
      class="custom-drawer"
    >
      <div class="instruction-panel">
        <div class="drawer-header">
          <h2>卫生间导航使用说明</h2>
        </div>
        <div class="instruction-content">
          <h3>如何使用</h3>
          <ol>
            <li>点击地图选择您的当前位置</li>
            <li>系统将自动查找10公里范围内最近的卫生间</li>
            <li>点击列表中的卫生间可查看详细信息</li>
            <li>点击"开始导航"按钮获取路线指引</li>
          </ol>
          <h3>图标说明</h3>
          <div class="icon-description">
            <div class="icon-item">
              <div class="icon-circle start"></div>
              <span>起点位置</span>
            </div>
            <div class="icon-item">
              <div class="icon-circle facility"></div>
              <span>卫生间位置</span>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 卫生间信息区域 -->
    <el-drawer
      v-model="showFacilityInfo"
      direction="rtl"
      size="360px"
      :with-header="false"
      class="custom-drawer"
    >
      <div v-if="currentFacility && uiUpdateTrigger >= 0" class="facility-detail">
        <div class="facility-header">
          <h2>{{ currentFacility.attributes.name || '卫生间' }}</h2>
          <el-button
            type="primary"
            size="small"
            @click="calculateRoute(currentFacility as unknown as Facility)"
          >
            <el-icon>
              <Location />
            </el-icon>
            导航到这里
          </el-button>
        </div>

        <el-descriptions :column="1" border>
          <el-descriptions-item label="地址">{{
            currentFacility.attributes.address || '未知'
          }}</el-descriptions-item>
          <el-descriptions-item label="卫生间类型">{{
            currentFacility.attributes.BathroomType || '未知'
          }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{
            currentFacility.attributes.gender || '未知'
          }}</el-descriptions-item>
          <el-descriptions-item label="无障碍设施">{{
            currentFacility.attributes.is_accessible || '未知'
          }}</el-descriptions-item>
          <el-descriptions-item label="是否免费">{{
            currentFacility.attributes.is_free || '未知'
          }}</el-descriptions-item>
          <el-descriptions-item label="费用">{{
            currentFacility.attributes.fee || '未知'
          }}</el-descriptions-item>
          <el-descriptions-item label="开放时间">{{
            currentFacility.attributes.open_time || '未知'
          }}</el-descriptions-item>
          <el-descriptions-item label="开放日">{{
            currentFacility.attributes.open_days || '未知'
          }}</el-descriptions-item>
          <el-descriptions-item label="厕位数量">{{
            currentFacility.attributes.toilet_count || '未知'
          }}</el-descriptions-item>
          <el-descriptions-item label="维护电话">
            <a
              v-if="currentFacility.attributes.MaintanceNumber"
              :href="`tel:${currentFacility.attributes.MaintanceNumber}`"
              >{{ currentFacility.attributes.MaintanceNumber }}</a
            >
            <span v-else>未知</span>
          </el-descriptions-item>
          <el-descriptions-item label="设施照片">
            <div v-if="currentFacility.attributes.Photo" class="facility-photo">
              <img
                :src="currentFacility.attributes.Photo"
                alt="设施照片"
                style="max-width: 100%; max-height: 200px"
              />
            </div>
            <span v-else>暂无照片</span>
          </el-descriptions-item>
        </el-descriptions>

        <div class="distance-info" v-if="currentFacility.distance">
          <h3>距离信息</h3>
          <div class="distance-detail">
            <el-icon><Position /></el-icon>
            <span>距离您: {{ (currentFacility.distance / 1000).toFixed(2) }}公里</span>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 附近卫生间列表 -->
    <div class="nearby-facilities" v-if="facilitiesCount">
      <div class="facilities-header">
        <h3>附近卫生间 ({{ facilitiesCount }})</h3>
        <el-button type="primary" size="small" @click="clearAll">
          <el-icon><Delete /></el-icon> 清除
        </el-button>
      </div>
      <el-scrollbar height="300px">
        <div
          v-for="(facility, index) in nearbyFacilitiesAttributes"
          :key="index"
          class="facility-item"
          @click="showFacilityDetails(facility)"
        >
          <div class="facility-name">
            {{ facility.name || '未命名卫生间' }}
          </div>
          <div class="facility-info">
            <span>{{ facility.BathroomType || '公共卫生间' }}</span>
            <span class="distance">{{ (facility.distance! / 1000).toFixed(2) }}km</span>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <!-- 路线详情卡片 -->
    <div class="route-card" v-if="showRouteDetails">
      <div class="route-header">
        <h3>导航路线</h3>
        <el-button
          class="close-btn"
          type="info"
          circle
          size="small"
          @click="showRouteDetails = false"
        >
          <el-icon>
            <Close />
          </el-icon>
        </el-button>
      </div>

      <div class="route-summary">
        <div class="summary-item">
          <el-icon>
            <Position />
          </el-icon>
          <span>{{ (routeDistance / 1000).toFixed(2) }}km</span>
        </div>
        <div class="summary-item">
          <el-icon>
            <Timer />
          </el-icon>
          <span>约{{ Math.ceil(routeTime / 60) }}分钟</span>
        </div>
      </div>

      <el-collapse accordion>
        <el-collapse-item title="导航指引">
          <div class="step-info">
            <div class="step-title">{{ startLocationName }} → {{ destinationName }}</div>
            <div class="step-detail">
              <span>{{ (routeDistance / 1000).toFixed(2) }}km</span>
              <span>·</span>
              <span>{{ Math.ceil(routeTime / 60) }}分钟</span>
            </div>
          </div>
          <div class="instructions-list">
            <div
              v-for="(instruction, index) in routeInstructions"
              :key="index"
              class="instruction-item"
            >
              <span class="instruction-index">{{ index + 1 }}</span>
              <span class="instruction-text">{{ instruction }}</span>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>

      <div class="card-actions">
        <el-button type="primary" size="small" @click="startNavigation" :disabled="isNavigating">
          开始导航
        </el-button>
        <el-button type="danger" size="small" @click="clearRoute"> 清空路线 </el-button>
      </div>
    </div>

    <!-- 导航提示 -->
    <div class="navigation-hint" v-if="isNavigating">
      <div class="hint-content">
        <div class="current-instruction">{{ currentNavigationStep }}</div>
        <div class="next-step" v-if="nextNavigationStep">
          <span>下一步:</span>
          <span>{{ nextNavigationStep }}</span>
        </div>
      </div>
      <el-progress
        :percentage="navigationProgress"
        :stroke-width="8"
        :format="progressFormat"
      ></el-progress>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { InfoFilled, Location, Position, Timer, Close, Delete } from '@element-plus/icons-vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import Graphic from '@arcgis/core/Graphic'
import Point from '@arcgis/core/geometry/Point'
import Polyline from '@arcgis/core/geometry/Polyline'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'
import SimpleLineSymbol from '@arcgis/core/symbols/SimpleLineSymbol'
import BufferParameters from '@arcgis/core/rest/support/BufferParameters'
import * as geometryEngine from '@arcgis/core/geometry/geometryEngine'
import gaodeLayer from '@/utils/GaoDeBaseLayer'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { getGaoDeRoute, type Step } from '@/utils/gaodeAPI'

// 定义卫生间设施接口
interface Facility {
  attributes: {
    OBJECTID: number
    name?: string
    address?: string
    BathroomType?: string
    gender?: string
    is_accessible?: string
    is_free?: string
    fee?: string
    open_time?: string
    open_days?: string
    toilet_count?: string
    MaintanceNumber?: string
    Photo?: string
  }
  geometry: __esri.Point
  distance?: number
}
interface FacilityAttributes {
  OBJECTID: number
  name?: string
  address?: string
  BathroomType?: string
  gender?: string
  is_accessible?: string
  is_free?: string
  fee?: string
  open_time?: string
  open_days?: string
  toilet_count?: string
  distance?: number
}
// 地图和视图
let map: __esri.Map
let view: __esri.MapView
const routePlanningMapView = ref<HTMLDivElement>()

// 卫生间设施图层
let facilitiesLayer: __esri.FeatureLayer | null = null

// 用户选择的位置
let userLocation: __esri.Point | null = null
let userLocationGraphic: __esri.Graphic | null = null

// 面板控制
const showInstructionPanel = ref(false)
const showFacilityInfo = ref(false)

// 使用普通变量存储 ArcGIS 对象
let currentFacility: Facility | null = null
let nearbyFacilities: Facility[] = []
const nearbyFacilitiesAttributes = ref<FacilityAttributes[]>([])

// 添加用于触发UI更新的状态变量
const uiUpdateTrigger = ref(0)

// 创建计算属性来访问设施数据
const facilitiesCount = ref(false)

// 路线规划
const showRouteDetails = ref(false)
const routeGraphics: __esri.Graphic[] = []
const routeDistance = ref(0)
const routeTime = ref(0)
const routeInstructions = ref<string[]>([])
const startLocationName = ref('您的位置')
const destinationName = ref('目的地')

// 导航状态
const isNavigating = ref(false)
const currentNavigationStep = ref('')
const nextNavigationStep = ref('')
const navigationProgress = ref(0)
const currentStepIndex = ref(0)

// 地图初始化
onMounted(async () => {
  await initMap()
  await loadFacilitiesLayer()
})

// 初始化地图
async function initMap() {
  map = new Map({
    basemap: {
      baseLayers: [gaodeLayer],
    },
  })

  view = new MapView({
    container: routePlanningMapView.value!,
    map: map,
    center: [116.3, 39.9], // 默认中心点
    zoom: 10,
  })

  // 点击地图事件
  view.on('click', async (event) => {
    const hitResults = (await view?.hitTest(event))?.results as __esri.MapViewGraphicHit[]

    // 检查是否点击了卫生间设施
    const facilityFeature = hitResults.find(
      (result) => result.layer?.id === facilitiesLayer?.id,
    )?.graphic
    nearbyFacilities.push(facilityFeature as Facility)
    if (facilityFeature) {
      // 点击了卫生间设施
      showFacilityDetails(facilityFeature.attributes as FacilityAttributes)
    } else {
      // 点击了地图其他位置，设置为用户位置
      setUserLocation(event.mapPoint)
    }
  })
}

// 加载卫生间设施图层
async function loadFacilitiesLayer() {
  try {
    // 创建卫生间设施图层
    facilitiesLayer = new FeatureLayer({
      url: 'https://services.arcgis.com/Jaqp8M1tVnnHQ5RM/arcgis/rest/services/Bathroom_FacilitiesManagementSystem/FeatureServer/0',
      outFields: ['*'],
      popupEnabled: false,
      renderer: {
        type: 'simple',
        symbol: {
          type: 'simple-marker',
          style: 'circle',
          size: 14,
          color: [0, 122, 194, 0.8],
          outline: {
            color: [255, 255, 255],
            width: 2,
          },
        },
      },
      // 添加标注
      labelingInfo: [
        {
          symbol: {
            type: 'text',
            color: '#333333',
            haloColor: '#ffffff',
            haloSize: 2,
            font: {
              size: 12,
              weight: 'normal',
            },
          },
          labelPlacement: 'above-center',
          labelExpressionInfo: {
            expression: '$feature.name',
          },
          minScale: 5000,
          maxScale: 0,
        },
      ],
    })

    map.add(facilitiesLayer)
    ElMessage.success('卫生间设施加载成功')
  } catch (error) {
    console.error('加载卫生间设施图层失败', error)
    ElMessage.error('加载卫生间设施图层失败')
  }
}

// 设置用户位置
function setUserLocation(point: __esri.Point) {
  // 清除之前的用户位置标记
  if (userLocationGraphic) {
    view.graphics.remove(userLocationGraphic)
  }

  // 保存用户位置
  userLocation = point

  // 创建用户位置标记
  const symbol = new SimpleMarkerSymbol({
    color: [255, 0, 0],
    size: 12,
    outline: {
      color: [255, 255, 255],
      width: 2,
    },
  })

  userLocationGraphic = new Graphic({
    geometry: point,
    symbol: symbol,
  })

  view.graphics.add(userLocationGraphic)

  // 查找附近卫生间
  findNearbyFacilities(point)
}

// 查找附近卫生间
async function findNearbyFacilities(point: __esri.Point) {
  if (!facilitiesLayer) return

  try {
    // 清除之前的结果
    // 清除之前的结果
    nearbyFacilities = []
    nearbyFacilitiesAttributes.value = [] // 新增：清空已有数据
    clearGraphics()

    // 创建10公里缓冲区
    const buffer = geometryEngine.buffer(point, 10, 'kilometers')

    // 查询缓冲区内的卫生间设施
    const query = facilitiesLayer.createQuery()
    query.geometry = buffer as __esri.Geometry
    query.outFields = ['*']
    query.returnGeometry = true
    query.outFields = ['*']
    query.returnGeometry = true

    const results = await facilitiesLayer.queryFeatures(query)

    if (results.features.length === 0) {
      ElMessage.warning('10公里范围内未找到卫生间设施')
      return
    }

    // 计算每个设施到用户位置的距离
    const facilities = results.features.map((feature) => {
      console.log(feature.attributes)
      const facility = feature as unknown as Facility
      // 计算直线距离
      const distance = geometryEngine.distance(point, facility.geometry, 'meters')
      return {
        attributes: { ...feature.attributes },
        geometry: feature.geometry,
        distance,
      }
    })

    // 按距离排序
    facilities.sort((a, b) => (a.distance || 0) - (b.distance || 0))
    // 更新UI
    uiUpdateTrigger.value++
    // 更新附近设施列表

    facilitiesCount.value = true
    // 在地图上标记设施
    facilities.forEach((facility) => {
      const symbol = new SimpleMarkerSymbol({
        color: [0, 122, 194],
        size: 10,
        outline: {
          color: [255, 255, 255],
          width: 1,
        },
      })

      const graphic = new Graphic({
        geometry: facility.geometry,
        symbol: symbol,
      })

      view.graphics.add(graphic)
      routeGraphics.push(graphic)
    })
    // 更新附近设施列表
    nearbyFacilities = facilities.map((facility) => ({
      attributes: facility.attributes,
      geometry: facility.geometry as __esri.Point,
      distance: facility.distance,
    }))
    for (const facility of facilities) {
      let a: FacilityAttributes = { ...facility.attributes, distance: facility.distance }
      nearbyFacilitiesAttributes.value.push(a)
    }
    // 触发UI更新
    uiUpdateTrigger.value++
    ElMessage.success(`找到${facilities.length}个卫生间设施`)
  } catch (error) {
    console.error('查找附近卫生间失败', error)
    ElMessage.error('查找附近卫生间失败')
  }
}

// 显示卫生间详情
function showFacilityDetails(facility: FacilityAttributes) {
  console.log(nearbyFacilities)
  currentFacility = nearbyFacilities.find((f) => f.attributes.OBJECTID === facility.OBJECTID)!
  showFacilityInfo.value = true
  uiUpdateTrigger.value = Date.now() // 使用时间戳确保强制更新
}

// 计算路线
async function calculateRoute(facility: Facility) {
  if (!userLocation) {
    ElMessage.warning('请先选择您的位置')
    return
  }

  try {
    // 清除之前的路线
    clearRoute()

    // 保存目的地名称
    destinationName.value = facility.attributes.name || '卫生间'

    // 调用高德路径规划API
    const routeResult = await getGaoDeRoute(
      `${userLocation.longitude},${userLocation.latitude}`,
      `${facility.geometry.longitude},${facility.geometry.latitude}`,
    )

    // 绘制路线
    if (routeResult && routeResult.route && routeResult.route.paths[0]) {
      const path = routeResult.route.paths[0]

      // 将路径点转换为二维数组
      const pathPoints = path.steps.flatMap((step) => {
        return step.polyline.split(';').map((point) => {
          const [lng, lat] = point.split(',').map(Number)
          return [lng, lat]
        })
      })

      // 创建路线图形
      const routeLine = new Graphic({
        geometry: new Polyline({
          paths: [pathPoints],
        }),
        symbol: new SimpleLineSymbol({
          color: [0, 122, 194, 0.8],
          width: 4,
        }),
      })

      view.graphics.add(routeLine)
      routeGraphics.push(routeLine)

      // 提取路线指引信息
      routeInstructions.value = path.steps.map((step) => step.instruction)

      // 设置路线距离和时间
      routeDistance.value = Number(path.distance)
      routeTime.value = Number(path.duration)

      // 显示路线详情
      showRouteDetails.value = true
      ElMessage.success('路线规划成功')
    } else {
      ElMessage.error('无法获取路线信息')
    }
  } catch (error) {
    console.error('路线规划失败', error)
    ElMessage.error('路线规划失败')
  }
}

// 清除地图上的图形
function clearGraphics() {
  // 保留用户位置标记
  if (userLocationGraphic) {
    view.graphics.removeAll()
    view.graphics.add(userLocationGraphic)
  } else {
    view.graphics.removeAll()
  }

  routeGraphics.length = 0
}

// 清空路线
function clearRoute() {
  // 清除路线图形，但保留用户位置和设施标记
  const facilitiesGraphics = [...routeGraphics]
  clearGraphics()

  // 重新添加设施标记
  facilitiesGraphics.forEach((graphic) => {
    if (graphic.symbol!.type === 'simple-marker') {
      view.graphics.add(graphic)
      routeGraphics.push(graphic)
    }
  })

  // 重置路线信息
  routeInstructions.value = []
  routeDistance.value = 0
  routeTime.value = 0
  showRouteDetails.value = false
  isNavigating.value = false
}

function clearAll() {
  view.graphics.removeAll()
  routeGraphics.length = 0
  userLocation = null
  userLocationGraphic = null
  nearbyFacilities = []
  nearbyFacilitiesAttributes.value = [] // 新增：清空已有数据
  currentFacility = null
  showFacilityInfo.value = false
  clearRoute()
}
// 开始导航
function startNavigation() {
  if (routeInstructions.value.length === 0) {
    ElMessage.warning('请先规划路线')
    return
  }

  isNavigating.value = true
  currentStepIndex.value = 0
  updateNavigationInfo()

  ElNotification({
    title: '导航已开始',
    message: '请按照指引前往目的地',
    type: 'success',
    duration: 3000,
  })
}

// 更新导航信息
function updateNavigationInfo() {
  // 获取当前指令
  if (routeInstructions.value.length > 0) {
    const allInstructions = routeInstructions.value

    if (allInstructions.length > 0) {
      currentNavigationStep.value = allInstructions[currentStepIndex.value]

      if (currentStepIndex.value < allInstructions.length - 1) {
        nextNavigationStep.value = allInstructions[currentStepIndex.value + 1]
      } else {
        nextNavigationStep.value = '到达目的地'
      }

      // 更新进度
      navigationProgress.value = (currentStepIndex.value / allInstructions.length) * 100
    }
  }

  // 模拟导航进度
  simulateNavigation()
}

// 模拟导航进度
function simulateNavigation() {
  if (!isNavigating.value) return

  setTimeout(() => {
    if (routeInstructions.value.length > 0) {
      const allInstructions = routeInstructions.value

      if (currentStepIndex.value < allInstructions.length - 1) {
        currentStepIndex.value++
        updateNavigationInfo()
      } else {
        // 导航完成
        completeNavigation()
      }
    }
  }, 8000) // 每8秒更新一次导航状态
}

// 完成导航
function completeNavigation() {
  isNavigating.value = false
  ElNotification({
    title: '导航完成',
    message: '您已到达目的地',
    type: 'success',
  })
}

// 格式化进度条显示
function progressFormat(percentage: number) {
  return Math.round(percentage) + '%'
}
</script>

<style scoped>
.route-planning-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.route-planning-map-view {
  width: 100%;
  height: 100%;
}

/* 修改操作说明按钮样式 */
.instruction-button {
  position: absolute;
  bottom: 10px;
  left: 0px; /* 修改位置到右边，340px是为了避免与附近卫生间列表重叠 */
  background-color: #fff;
  padding: 10px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 10;
}

/* 可选：添加悬停效果 */
.instruction-button:hover {
  background-color: #f5f7fa;
}
.instruction-button .el-icon {
  margin-right: 5px;
  font-size: 18px;
  color: #409eff;
}

/* 附近卫生间列表 */
.nearby-facilities {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 300px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 10;
  overflow: hidden;
}

.facilities-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}

.facilities-header h3 {
  margin: 0;
  font-size: 16px;
}

.facility-item {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.facility-item:hover {
  background-color: #f5f7fa;
}

.facility-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.facility-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #666;
}

.distance {
  color: #409eff;
}

/* 路线详情卡片 */
.route-card {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 350px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 10;
  overflow: hidden;
}

.route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}

.route-header h3 {
  margin: 0;
  font-size: 16px;
}

.route-summary {
  display: flex;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}

.summary-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.summary-item .el-icon {
  margin-right: 5px;
  color: #409eff;
}

.step-info {
  padding: 10px 0;
}

.step-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.step-detail {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}

.instructions-list {
  margin-top: 10px;
}

.instruction-item {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
}

.instruction-index {
  width: 24px;
  height: 24px;
  background-color: #409eff;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  flex-shrink: 0;
}

.instruction-text {
  flex: 1;
  line-height: 1.5;
}

.card-actions {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  border-top: 1px solid #eee;
}

/* 导航提示 */
.navigation-hint {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  z-index: 10;
}

.hint-content {
  margin-bottom: 10px;
}

.current-instruction {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.next-step {
  font-size: 13px;
  color: #666;
}

/* 图标说明 */
.icon-description {
  margin-top: 15px;
}

.icon-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.icon-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 10px;
}

.icon-circle.start {
  background-color: #f56c6c;
}

.icon-circle.facility {
  background-color: #409eff;
}

/* 设施详情 */
.facility-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.facility-header h2 {
  margin: 0;
  font-size: 18px;
}

.distance-info {
  margin-top: 20px;
}

.distance-info h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

.distance-detail {
  display: flex;
  align-items: center;
  color: #409eff;
}

.distance-detail .el-icon {
  margin-right: 5px;
}

/* 抽屉标题 */
.drawer-header {
  padding: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
}

.drawer-header h2 {
  margin: 0;
  font-size: 18px;
}

.instruction-content {
  padding: 0 15px 15px;
}

.instruction-content h3 {
  margin: 15px 0 10px;
  font-size: 16px;
}

.instruction-content ol {
  padding-left: 20px;
}

.instruction-content li {
  margin-bottom: 8px;
}
</style>
